<template>
	<!-- 	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">账号：</text>
				<m-input type="text" focus clearable v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">密码：</text>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
			<view class="input-row">
				<text class="title">邮箱：</text>
				<m-input type="text" clearable v-model="email" placeholder="请输入邮箱"></m-input>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="register">注册</button>
		</view>
	</view> -->
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120"
			 :label-position="labelPosition" label="账号" prop="account">
				<u-input :border="border" placeholder="请输入账号" v-model="model.account" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120" :label-position="labelPosition"
			 label="密码" left-icon="lock" prop="password">
				<u-input :border="border" type="password" :password="true" v-model="model.password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" left-icon="lock"
			 label="确认密码" label-width="170" prop="rePassword">
				<u-input :border="border" type="password" :password="true" v-model="model.rePassword" placeholder="请确认密码"></u-input>
			</u-form-item>
		</u-form>
		<u-button @click="register">注册</u-button>
	</view>
</template>

<script>
	import service from '../../service.js';
	import mInput from '../../components/m-input.vue';

	export default {
		components: {
			mInput
		},
		data() {
			return {
				// account: '',
				// password: '',
				// email: '',
				model: {
					account: '',
					password: '',
					rePassword: '',
				},
				labelPosition: 'left', //文字位置
				border: false,
				rules: {

					mobile: [{
							required: true,
							message: '请输入账号',
							trigger: 'blur',
						},
						{
							min: 6,
							max: 11,
							message: '正确账号长度在6到11个字符',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					rePassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				},
				errorType: ['message'],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				// if (this.account.length < 5) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '账号最短为 5 个字符'
				// 	});
				// 	return;
				// }
				// if (this.password.length < 6) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '密码最短为 6 个字符'
				// 	});
				// 	return;
				// }
				// if (this.email.length < 3 || !~this.email.indexOf('@')) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '邮箱地址不合法'
				// 	});
				// 	return;
				// }
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
						console.log('验证通过');
						const data = {
							account: this.model.account,
							password: this.model.password,
							// email: this.email
						}
						service.addUser(data);
						uni.showToast({
							title: '注册成功'
						});
						uni.navigateBack({
							delta: 1
						});
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
